<template>
    <div class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="pageSizes"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRecords">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name:"pagination",
    props:{
        pageSizes:{
            type:Array,
            default(){
                return [1,2,5,10]
            }
        },
        // pageSize:{
        //     type:Number,
        //     default:10,
        // },
        // newSize:Number,
        // newPage:Number,
        totalRecords:Number,
        // pageIndex:Number
    },
    data(){
        return{
            pagenum:1,
            pagesize:5,
        }
    },
    methods:{
        // 分页的设置
        // 一页几条
        handleSizeChange(pagesize){
            this.pagesize=pagesize
            this.$emit('handleSizeChange', pagesize)
        },
        // 点击设置第几页
        handleCurrentChange(pagenum){
            this.pagenum=pagenum
            this.$emit('handleCurrentChange', pagenum)
        }
    }
}
</script>

<style>
.page{
    margin-top: 20px;
}
</style>